<template>
  <div class="box">
    <!-- 导航栏 -->
    <div class="bodyers">
      <router-link to="/">
        <van-nav-bar title="文章详情" left-arrow />
      </router-link>
    </div>
    <!-- 标签名称 -->
    <div class="tops">
      <h3>{{ this.title }}</h3>
    </div>
    <!-- 头像作者 -->
    <div class="card">
      <p class="header1">
        <img :src="this.avatar" alt="" />
      </p>
      <p class="header2">{{ this.author }}</p>
      <p class="header3">{{ this.time | dateFormate }}</p>
      <p class="header5">关注</p>
      <p class="header4"></p>
    </div>
    <div class="details">
      <span class="Detail">{{ this.content }}</span>
      <img :src="this.imageSrc" alt="" />
    </div>
    <!-- 底部分割线 -->
    <hr />
    <p class="evaluate"></p>
    <div class="buttom">
      <p class="remark">全部评论</p>
    </div>
    <li class="card" v-for="(item, index) in net" :key="index">
    <div class="section">
      <p class="header1">
        <img :src="item.info.avatar" alt="" />
      </p>
      <p class="message1">{{ item.info.nickname }}</p>
      <!-- <p class="message1">{{ item.info._id }}</p> -->
      <p class="message3">{{ item.content }}</p>
       <!-- <div
          :class="{
            none: item.poster_type == 1,
            none1: item.poster_type == 2,
            none2: item.poster_type == 3,
          }"
        >
          <img :src="img" v-for="img in item.imageSrc" alt="" :key="img" />
        </div> -->
      <p class="message2">{{ item.create_time | dateFormate }} 
       <van-cell  @click="showPopup" class="whilt">
              <span class="reply" @click="back(index)">回复</span> 
       </van-cell>    
      </p>
      </div>
      <div class="myCard">
          
      </div>
        
    </li>
    <!-- 底部评论点赞等导航栏 -->
    <div class="under">
      <van-cell  @click="showPopup">
      <input type="text" class="field" placeholder="请友善的评论" />
      </van-cell>
      <span class="iconfont icon-xinxi"></span>
      <span class="iconfont icon-dianzan" @click="love"></span>
      <span class="iconfont icon-shoucang1" @click="collect" :class="iconfont? '' : ''" ></span>    
      <span class="iconfont icon-weixin" ></span>
      <span class="iconfont icon-pengyouquan"></span>
    </div>
    <!-- 弹出层 -->
  
<!-- 回复别人的弹出层 -->
<van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
    <van-field
  v-model="message"
  rows="2"
  autosize
  
  type="textarea"
  maxlength="50"
  placeholder="请输入留言"
  show-word-limit
/>
<button class="send" @click="send">发布</button>
    </van-popup>
<!-- 回复文章的弹出层 -->
    <van-popup v-model="shows" position="bottom" :style="{ height: '30%' }">
    <van-field
  v-model="message"
  rows="2"
  autosize
  type="textarea"
  maxlength="50"
  placeholder="请输入留言"
  show-word-limit
/>
<button class="send" @click="sends">发布</button>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";

import { getArtclesAPI } from "@/api/articlesApl";
const result = getArtclesAPI();
console.log(result);
export default {
  data() {
    return {
      // actives:0,
      message:'',
     
      show: false,
      shows: false,
      iconfont:[],
      imageSrc: [],
      time: "",
      author: "",
      avatar: "",
      content: "",
      title: "",
      article_id: "",
      user_id: "",
      aa: "",
      net: [],
      avter: "",
      is_fav: false,
      is_like: false,
       reply_comment_id:'',
    };
  },
  onClickLeft() {
    Toast("返回");
  },
  onClickRight() {
    Toast("按钮");
  },
  created() {
    this.user_id = JSON.parse(localStorage.getItem("Token"))._id;
    console.log(this.user_id);
    this.aa = this.$route.query.id;
    this.title = this.$route.query.title;
    // console.log(this.title);
    //  console.log(this.aa);
    this.$http
      .post("/api/get_article_detail", {
        article_id: this.aa,
        user_id: this.user_id,
      })
      .then((res) => {
        console.log(res);
        this.avatar = res.data.data.avatar;
        this.author = res.data.data.author;
        this.time = res.data.data.time;
        this.content = res.data.data.content;
        this.imageSrc = res.data.data.imageSrc;
        this.article_id = res.data.data._id;
          this.is_fav = res.data.data.is_fav
            this.is_like = res.data.data.is_like
        console.log(res.data.data._id);
      }),
      this.$http
        .post("/api/get_comment_list", {
          article_id: this.aa,
          skip: 0,
          limit: 8,
          user_id: this.user_id,
        })
        .then((res) => {
          console.log(res);

          // console.log(res.data.data);
          this.net = res.data.data;
          console.log(this.net);
        });
  },
  computed: {
    // 让cate-id 通过索引的方式获取里面的具体id用函数进行if语句判断获取新的id
    cate_id() {
      return this.cate[this.active]._id;
    },
  },
  watch: {
    active() {
      this.getCates();
      console.log(this.cate_id);
    },
  },

  methods: {
    // 上拉加
    showPopup() {
      this.show = true;
    },
    // 收藏点击事件
    collect() {
      if (this.is_fav == true) {
        this.$http
          .post("/api/remove_fav", {
            user_id: this.user_id,
            article_id: this.article_id,
          })
          .then((res) => {
            console.log(res);
            this.is_fav = false
            Toast("取消收藏");
       
          })
           
      } else if (this.is_fav == false) {
        this.$http
          .post("/api/add_fav", {
            user_id: this.user_id,
            article_id: this.article_id,
          })
          .then((res) => {
            console.log(res);
            this.is_fav = true
            Toast("收藏成功");
            
          })
       
      }
      // 点赞点击事件
    },
    // 双击点击事件
     love(){
              if (this.is_like == true) {
        this.$http
          .post("/api/unlike", {
          user_id: this.user_id,
            article_id: this.article_id,
          })
          .then((res) => {
            console.log(res);
            this.is_like = false
            Toast("取消点赞");
       
          })
           
      } else if (this.is_like == false) {
        this.$http
          .post("/api/like", {
             user_id: this.user_id,
            article_id: this.article_id,
          })
          .then((res) => {
            console.log(res);
            this.is_like = true
            Toast("点赞成功");
            
          })
       
      }
      },
      back(index){
         this.$http
          .post("/api/get_reply_list", {
            skip: 0,
            limit: 8,
            user_id: this.user_id,
            article_id: this.article_id,
            // reply_comment_id,
          })
          .then((res) => {
            console.log(res);
            this.reply_comment_id=res.data.data[index].reply_comment_id
            console.log(this.reply_comment_id);
          }) 
      },
      // 回复网友评论
      send(index){        
           this.$http
          .post("/api/add_comment", {          
            user_id: this.user_id,
            content:this.content,
            comment_type:1,
            article_id: this.article_id,
            reply_comment_id:this.reply_comment_id
          })
          .then((res) => {
            console.log(res);
            
       
          }) 
      },
      // 评论文章
       sends(){
             this.$http
           .post("/api/add_comment", {          
            user_id: this.user_id,
            content:this.content,
            comment_type:0,
            article_id: this.article_id,
            // reply_comment_id:this.reply_comment_id
          })
          .then((res) => {
            console.log(res);

          }) 
       }
  },
};
</script>

<style lang="less" scoped>
.reply{
 
  font-size: 5px;
}
.whilt{
 
  width: 70px;
  margin-left: 130px;
  margin-top: -30px;
}
.message1,
.message2,
.message3 {
  text-align: left;
  white-space: nowrap;
  font-size: small;
  height: 13px;
  width: 50px;
  margin-left: 75px;
}
.message1 {
  margin-top: -40px;
}
.message2 {
  width: 140px;
  margin-top: 20px;
}
.message3{
  
  margin-top: 20px;

}
.iconfont {
 
  font-size: 30px;
  margin-left: 20px;
  height: 30px;
  line-height: 50px;
}

.bodyers {
  z-index: 2;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.under {
  background-color: #fff;
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.puter() {
  width: 30px;
}
.card {
  list-style: none;
  margin-bottom: 60px;
}
.field {
  line-height: 50px;
  width: 90%;
  height: 25px;
  border-radius: 30px;
}
.remark {
  margin-right: 250px;
}
.header1 {
  margin-top: 40px;
  margin-left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 40px;
}
.header1 img {
  width: 80px;
  height: 80px;
  height: 100%;
  width: 100%;
  border-radius: 40px;
}
.header2,
.header3 {
  // margin-top: -40px;
  text-align: left;
  // margin-top: 70px;
  white-space: nowrap;
  font-size: small;
  // margin-left:10px ;\
  height: 13px;
  width: 50px;
}
.header2 {
  margin-left: 75px;
  //  margin-left:-200px ;
  margin-top: -60px;
}
.header3 {
  margin-left: 75px;
  margin-top: 20px;
}
.header4 {
  margin-left: 20px;
  border: 0.5px solid rgb(232, 228, 229);
}
.header5 {
  width: 60px;
  height: 30px;
  line-height: 30px;
  border-radius: 40px;
  background-color: pink;
  margin-left: 290px;
  margin-top: -50px;
}
.Detail {
  display: block;
  // float: left;
  margin-left: 20px;
  text-align: left;
}

.details img {
  margin-top: 30px;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.tops h3 {
  text-align: left;
  margin-top: 70px;
  margin-left: 20px;
}
h2 {
  margin-left: -30px;
}
.name {
  height: 100px;
  display: flex;
}
.lefter,
.lefters {
  margin-left: 20px;
  margin-top: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  background-repeat: no-repeat;
  background-size: 60px 60px;
}
.lefter {
  background-image: url(../assets/1.webp);
}
.lefters {
  background-image: url(../assets/8.webp);
}
.p2,
.p3,
.p4,
.p5 {
  padding-left: 70px;
}
.p2 {
  width: 40px;
  height: 20px;
  line-height: 5px;
}
.p3 {
  width: 80px;
  height: 40px;
  line-height: 5px;
}
.righter {
  margin-left: 5px;
}
.righter p {
  width: 75px;
  height: 25px;
  border-radius: 20px;
  border: 1px solid pink;
  margin-left: 200px;
  margin-top: 75px;
}
hr {
  margin-top: 20px;
}
.kun,
.kun2 {
  text-indent: 2em;
}
.p4 {
  padding-top: 10px;
  width: 40px;
  height: 20px;
  line-height: 5px;
}
.p4 span {
  margin-left: 230px;
}

.p5 {
  padding-left: 74px;
  font-size: 20px;
  width: 80px;
  height: 40px;
  line-height: 5px;
}
.p6 {
  padding-left: 69px;
  width: 80px;
  height: 40px;
  line-height: 5px;
  margin-left: 20px;
  margin-top: 25px;
}
.timers {
  display: flex;
}
.p7 {
  height: 20px;
  width: 60px;
  margin-left: 30px;
  border: 1px solid pink;
  border-radius: 30px;
}
// .evaluate{
//   margin-top: 50px;
//   border: 2px solid rgb(148, 144, 144);
// }
</style>